<template>
  <div>
    <div class="top">
      {{ topTitle }}
      <router-link to="/my">
        <img src="../../../../assets/img/icon-home.png" alt="" width="20">
      </router-link>
    </div>
    <div class="search">
      <van-search
        v-model="search"
        placeholder="请输入搜索关键词"
        show-action
        shape="round">
        <div slot="action" @click="onSearch">搜索</div>
      </van-search>
    </div>
    <div class="content">
      <div class="list">
        <router-link v-for="(e, i) in list" :key="i" :to="`${path}?id=${e.id}`">
          <div class="user">
            <div class="avatar"><img :src="e.head_sculpture ? e.head_sculpture : avatar" alt="" width="50" height="50"></div>
            <div class="name">
              <span>{{ e.name }}</span>
              <span class="tag" v-if="e.bname">{{ e.bname }}</span>
            </div>
          </div>
          <van-divider/>
        </router-link>
      </div>
      <!--<div class="list-item" v-for="(item, index) in list" :key="index">
        <div class="title-tag">{{ title[index] }}</div>
        <div class="list">
          <router-link v-for="(e, i) in item" :key="i" :to="`${path}?id=${e.id}`">
            <div class="user">
              <div class="avatar"><img src="../../../../assets/img/icon-avatar.png" alt="" width="50"></div>
              <div class="name">
                <span>{{ e.name }}</span>
                <span class="tag" v-if="e.platform">{{ e.platform }}</span>
              </div>
            </div>
            <van-divider/>
          </router-link>
        </div>
      </div>-->
    </div>
    <van-divider style="margin-top: 16px;">{{ type === '1' ? `共${tnum}位教师 | ${anum}个机构` : (type === '2' ? `共${student}位学生` : `共${snum}个机构`) }}</van-divider>
  </div>
</template>

<script>
import api from '@/api'
export default {
  name: 'list',
  data () {
    return {
      avatar: require('@/assets/img/icon-avatar.png'),
      search: '',
      type: '1',
      list: [],
      title: ['A', 'B', 'C', 'D'],
      listInfo: [
        {title: '教师列表', url: '/teacher/detail'},
        {title: '学生列表', url: '/student/detail'},
        {title: '机构列表', url: '/index/about'}
      ],
      topTitle: '',
      path: '',
      student: '', // 学生数量
      snum: '', // 机构数量
      tnum: '', // 教师数量
      anum: '' // 机构数量
    }
  },
  methods: {
    onSearch () {
      this.initList()
    },
    initList () {
      switch (this.type) {
        case '1':
          this.getTeacherList()
          break
        case '2':
          this.getStudentList()
          break
        case '3':
          this.getAgencyList()
          break
      }
    },
    getTeacherList () {
      let params = {}
      if (this.search) {
        params.name = this.search
      }
      api.platformTeacherList({
        params,
        callback: res => {
          if (res.data.error_code === 0) {
            this.list = res.data.data
            this.tnum = res.data.data.mechanism
            this.anum = res.data.data.count
          }
        }
      })
    },
    getStudentList () {
      let params = {}
      if (this.search) {
        params.name = this.search
      }
      api.platformStudentList({
        params,
        callback: res => {
          if (res.data.error_code === 0) {
            this.list = res.data.data
            this.student = res.data.data.count
          }
        }
      })
    },
    getAgencyList () {
      let params = {}
      if (this.search) {
        params.name = this.search
      }
      api.platformAgencyList({
        params,
        callback: res => {
          if (res.data.error_code === 0) {
            this.list = res.data.data.mechanism
            this.snum = res.data.data.count
          }
        }
      })
    }
  },
  created () {
    this.type = this.$route.params.type
    let index = Number(this.type) - 1
    this.topTitle = this.listInfo[index].title
    this.path = this.listInfo[index].url
    this.initList()
  }
}
</script>

<style scoped>
  .top{
    height: 48px;
    background: rgba(255,255,255,1);
    box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
    line-height: 48px;
    position: relative;
    margin-bottom: 6px;
    text-align: center;
    color: #1E1E1E;
    font-family: PingFangBlod;
  }
  .top img{
    position: absolute;
    right: 10px;
    top: 14px;
  }
  .list-item .title-tag{
    background-color: #f2f2f2;
    padding: 10px 15px;
    font-size:12px;
    font-family:PingFang SC;
    font-weight:bold;
    color:rgba(102,102,102,1);
  }
  .user{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 58px;
  }
  .user .avatar{
    padding: 10px;
    height: 50px;
    flex-shrink: 0;
    flex-grow: 0;
  }
  .user .avatar img{
    border-radius: 50%;
    overflow: hidden;
  }
  .user .name{
    height: 100%;
    flex-shrink: 1;
    flex-grow: 1;
    box-sizing: border-box;
    line-height: 57px;
    font-family: PingFangBlod;
    font-size: 18px;
    position: relative;
    color: #1A1D20;
    display: flex;
    justify-content: space-between;
  }
  .name .tag{
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #666666;
    margin-right: 10px;
  }
  .tag a{
    color: #fff;
  }
  .van-divider{
    margin: 0;
  }
</style>
